<template>
  <!-- 用户信息弹窗 -->
  <div class="xd-model-1">
    <div class="xd-model-head">
      <img
        :src="require('@/assets/xd/new/profilePicture1.png')"
        alt=""
        class="itp"
      />
      <div class="itc">用户信息</div>
    </div>
    <div class="body">
      <div class="unit-info">
        <span>用户头像：</span>
        <img :src="require('@/assets/xd/new/profilePicture.png')" />
      </div>

      <div class="unit-info">
        <span>用户名：</span>
        <span class="right-align">{{ initData.userName }}</span>
      </div>
      <div class="unit-info">
        <span>平台：</span>
        <span class="right-align">{{ initData.userPlate }}</span>
      </div>
      <!-- <div class="unit-info">
        <span>用户ID：</span>
        <span class="right-align">{{ initData.userid }}</span>
      </div>
      <div class="unit-info">
        <span>定位依据：</span>
        <span class="right-align">{{ initData.locationBasis }}</span>
      </div> -->
      <div class="unit-info">
        <span>家庭地址：</span>
        <span class="right-align">{{ initData.userHomeAddr }}</span>
      </div>
      <div class="unit-info">
        <span>工作地址：</span>
        <span class="right-align">{{ initData.userWorkAddr }}</span>
      </div>
      <!-- <div class="unit-info">
        <span>泄露经度：</span>
        <span class="right-align">{{ initData.locationLon }}</span>
      </div>
      <div class="unit-info">
        <span>泄露纬度：</span>
        <span class="right-align">{{ initData.locationLat }}</span>
      </div> -->
      <!-- "locationLat": "32.26563",
      "locationLon": "80.23633", -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  watch: {
    info: function (val) {
      console.log("val", val);
      this.initData = val;
    },
  },
  data() {
    return {
      initData: {},
    };
  },
  mounted() {},
};
</script>

<style scoped>
.itp {
  height: 40px;
  padding-top: 10px;
}

.itc {
  position: absolute;
  top: 10px;
  left: 45px;
  /* // width: 150px; */
  height: 30px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

.xd-model-1 {
  position: relative;
  z-index: 1000;
  top: 2%;
  left: 1%;

  .xd-model-head {
    width: 40%;
    position: absolute;

    top: 20px;
    left: 10px;
    z-index: 100;
    background-image: url("~@/assets/xd/new/title.png");
    background-repeat: no-repeat;
    background-size: 50% 100%;
  }
}

.body {
  font-size: 16px;
  position: absolute;
  top: 60px;
  left: 10px;
  padding: 8px;
  color: #90cee9;
  background-color: rgba(8, 38, 79, 0.6);
}
</style>
